<template>
  <view>
    <view class="u-skeleton">
      <view>
        <view class="container">
          <view class="userinfo">
            <view>
              <!--u-skeleton-circle 绘制圆形-->
              <image class="u-skeleton-rect" :src="foodObj.foodImage1"></image>
              <!--菜名-->
              <view class="u-skeleton-fillet store-name"
                >{{ foodObj.foodName }}
              </view>

              <!-- tag左标签 -->
              <u-tag
                class="tag-right"
                text="No.52"
                type="warning"
                mode="light"
              ></u-tag>
              <!-- tag右标签 -->
              <u-tag
                class="tag-left"
                :text="foodLocationTag"
                type="warning"
                mode="dark"
              ></u-tag>
              <!-- 收藏 -->
              <u-button
                type="default"
                plain
                size="mini"
                class="food-collect"
                hover-class="none"
                @click="collectThisFoodByFoodId(foodObj.foodId)"
                v-show="favoriteShow"
              >
                <u-icon name="shopping-cart" color="#ffac2a"></u-icon>
                收藏
              </u-button>
              <u-button
                type="default"
                plain
                size="mini"
                class="food-collect"
                hover-class="none"
                @click="cancelThisFoodByFoodId(foodObj.foodId)"
                v-show="!favoriteShow"
              >
                <u-icon name="shopping-cart" color="#ffac2a"></u-icon>
                已收藏
              </u-button>

              <!-- 评价 -->
              <u-button
                type="default"
                plain
                size="mini"
                class="food-evaluate"
                hover-class="none"
                @click="gotoReviewPageByMouseClick"
              >
                <u-icon name="chat" color="#ffac2a"></u-icon>
                评价</u-button
              >
            </view>
          </view>
        </view>

        <!-- 简介 -->
        <view class="food-introduction">
          <!-- 简介标题 -->
          <view class="food-introduction-title"> 简介 </view>
          <!-- 简介内容 -->
          <view class="food-introduction-content">
            <u-read-more
              close-text="展开"
              open-text="收起"
              show-height="320"
              color="#c4c4c4"
              :toggle="true"
              :shadow-style="shadowStyle"
            >
              <rich-text :nodes="foodObj.foodIntroduce"></rich-text>
            </u-read-more>
          </view>
        </view>

        <!-- 展示美食所在的地理位置 -->
        <view style="margin: 10px 0">
          <u-cell-group>
            <u-cell-item
              icon="map"
              :title="foodObj.foodLocation"
              value=""
              class="u-skeleton-rect"
            ></u-cell-item>
          </u-cell-group>
        </view>

        <!-- 评分模块展示 -->
        <view class="score-show">
          <view class="food-score">
            美食评分
            <text class="sup">TM</text>
          </view>

          <view class="score-content">
            <view class="score-left">
              <view class="score-num">{{ foodObj.foodScore }}</view>
              <!-- 当前评分 -->
              <u-rate
                :count="starCount"
                v-model="foodObj.foodScore"
                :disabled="true"
                active-color="#ffac2b"
                size="24"
              ></u-rate>
            </view>

            <view class="score-right">
              <view class="score-stars">
                <!-- 评分 -->
                <u-rate
                  :count="1"
                  current="1"
                  :disabled="true"
                  active-color="#bfbfbf"
                  size="20"
                ></u-rate>
                <!-- 评分 -->
                <u-rate
                  :count="2"
                  current="2"
                  :disabled="true"
                  active-color="#bfbfbf"
                  size="20"
                ></u-rate>
                <!-- 评分 -->
                <u-rate
                  :count="3"
                  current="3"
                  :disabled="true"
                  active-color="#bfbfbf"
                  size="20"
                ></u-rate>
                <!-- 评分 -->
                <u-rate
                  :count="4"
                  current="4"
                  :disabled="true"
                  active-color="#bfbfbf"
                  size="20"
                ></u-rate>
                <!-- 评分 -->
                <u-rate
                  :count="5"
                  current="5"
                  :disabled="true"
                  active-color="#bfbfbf"
                  :size="20"
                ></u-rate>
              </view>
              <view class="score-lines">
                <u-line-progress
                  active-color="#fdab2d"
                  :height="10"
                  :show-percent="false"
                  :percent="70"
                ></u-line-progress>
                <u-line-progress
                  active-color="#fdab2d"
                  :height="10"
                  :show-percent="false"
                  :percent="8"
                ></u-line-progress>
                <u-line-progress
                  active-color="#fdab2d"
                  :height="10"
                  :show-percent="false"
                  :percent="10"
                ></u-line-progress>
                <u-line-progress
                  active-color="#fdab2d"
                  :height="10"
                  :show-percent="false"
                  :percent="10"
                ></u-line-progress>
                <u-line-progress
                  active-color="#fdab2d"
                  :height="10"
                  :show-percent="false"
                  :percent="1"
                ></u-line-progress>
              </view>
            </view>
          </view>
        </view>

        <!-- 查看所有评论 -->
        <u-cell-group :border="false">
          <u-cell-item
            title="查看所有评论"
            icon="email"
            value=""
            class="u-skeleton-rect all-comment-cell"
            :border-top="false"
            :border-bottom="false"
            @click="gotoCommentsPageByMouseClick"
          ></u-cell-item>
        </u-cell-group>

        <!-- 评论 -->
        <view class="comment" v-for="cobj in commentObj.slice(0,3)" :key="cobj.commentId">
          <u-avatar :src="cobj.userAvatar+`?t=${new Date().getTime()}`" class="u-skeleton-rect"></u-avatar>
          <text class="userName u-skeleton-rect">{{ cobj.userName }}</text>
          <text class="commentTime u-skeleton-rect">{{
            cobj.commentTime
          }}</text>
          <view class="commentText u-skeleton-rect">
            <!--  show-height="200" close-text="展开评论" -->
            <u-read-more :toggle="true">
              <rich-text :nodes="cobj.commentContent"></rich-text>
            </u-read-more>
          </view>
        </view>

        <!--引用组件-->
        <u-skeleton
          :loading="loading"
          :animation="true"
          bgColor="#FFF"
        ></u-skeleton>

        <!-- 消息提醒 -->
        <u-toast ref="uToast" />
      </view>
    </view>
  </view>
</template>

<script>
import uTag from "../../uview-ui/components/u-tag/u-tag.vue";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

// let hostname = "http://127.0.0.1:8080"; // 设置主机名
// let urlImg = "http://175.178.217.113:9000"; // 设置图片的路径
// // const userId = 0; // 设置一个默认useId为1
// let userId = 0;

export default {
  computed: {},
  components: { uTag },
  data() {
    return {
      content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。`,
      foodObj: {},
      foodLocationTag: '',
      commentObj: [],
      // 用户默认头像
      userAvatarSrc: "/static/images/avatar.jpg", // 引入src需要使用绝对路径
      FoodImg: "/static/images/d4953d75-964f-48b0-b17a-d95d90829e63.jpg",
      starCount: 5,
      starValue: 4,
      shadowStyle: {
        backgroundImage: "none",
        paddingTop: "300rpx",
        marginTop: "-300rpx",
      },
      loading: false, // 是否显示骨架屏组件
      favoriteShow: true,
    };
  },
  methods: {
    // 点击按钮取消收藏
    cancelThisFoodByFoodId(foodId) {
      const {
        comment: { userId },
        hostname,
        urlImg,
      } = this.$store.state.moduleCommon;
      this.favoriteShow = !this.favoriteShow;
      uni.request({
        url: `${hostname}/api/browse/favorite/${foodId}/${userId}/0`,
        success: (res) => {
          this.$refs.uToast.show({
            title: "取消收藏",
            type: "success",
          });
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },

    // 点击按钮收藏美食
    collectThisFoodByFoodId(foodId) {
      const {
        comment: { userId },
        hostname,
        urlImg,
      } = this.$store.state.moduleCommon;

      this.favoriteShow = !this.favoriteShow;
      console.log("foodId", foodId);
      console.log("userId", userId);
      uni.request({
        url: `${hostname}/api/browse/favorite/${foodId}/${userId}/1`,
        success: (res) => {
          this.$refs.uToast.show({
            title: "收藏成功",
            type: "success",
          });
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },

    // 鼠标点击跳转到评论页面
    gotoReviewPageByMouseClick() {
      const {
        comment: { userId },
        hostname,
        urlImg,
      } = this.$store.state.moduleCommon;

      uni.redirectTo({
        url: `/pages/review/review?foodId=${this.foodObj.foodId}`,
        success: (res) => {
          console.log(res);
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    
    // 点击评论跳转到完整评论展示区
    gotoCommentsPageByMouseClick() {
      const {
        comment: { userId },
        hostname,
        urlImg,
      } = this.$store.state.moduleCommon;

      uni.navigateTo({
        url: `/pages/comments/comments?foodId=${this.foodObj.foodId}`,
        success: (res) => {
          console.log(res);
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    
    // 给详情页发送请求获取对应的数据
    getDetail(foodId) {
      const {
        comment: { userId },
        hostname,
        urlImg,
      } = this.$store.state.moduleCommon;

      // console.log("foodId", foodId);
      uni.request({
        url: `${hostname}/api/food/detailed/${foodId}`,
        success: (res) => {
          this.foodObj = res.data.data;
          this.foodLocationTag = this.foodObj.foodLocation.split('/')[1] + 'Top6'
          this.foodObj.foodImage1 = `${urlImg}/${this.foodObj.foodImage1}`;
          this.foodObj.foodImage2 = `${urlImg}/${this.foodObj.foodImage2}`;
          this.foodObj.foodImage3 = `${urlImg}/${this.foodObj.foodImage3}`;
          this.commentObj = this.foodObj.comments;
          // console.log('commentObj', this.commentObj);
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    
    // 查询这个美食是否被收藏过了
    // 1表示收藏过了
    // 0表示未收藏
    isFavoriteByThisUserIdAndThisFoodId(foodId) {
      const {
        comment: { userId },
        hostname,
        urlImg,
      } = this.$store.state.moduleCommon;

      // console.log("isFavoriteByThisUserIdAndThisFoodId", userId, foodId);
      uni.request({
        url: `${hostname}/api/browse/collect/${foodId}/${userId}`,
        success: (res) => {
          // console.log(res.data.data.isCollect);
          if (res.data.data.isCollect === 1) {
            this.favoriteShow = false;
          }
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
  },
  onShow() {
    // 查询是否已经被收藏过了
    this.isFavoriteByThisUserIdAndThisFoodId(this.foodObj.foodId);
  },
  onLoad(e) {
    // userId = this.$store.state.moduleCommon.comment.userId

    const {
      comment: { userId },
      hostname,
      urlImg,
    } = this.$store.state.moduleCommon;
    // console.log("state load", userId, hostname, urlImg);

    // console.log("onLoad", userId);
    // console.log("hostname123", hostname);
    if (e.foodId) {
      // console.log("onLoad", e.foodId);
      this.foodObj.foodId = e.foodId;
      this.getDetail(e.foodId);
      // 发送网络请求, 添加到历史记录中保存
      uni.request({
        url: `${hostname}/api/browse/add/history/record/${e.foodId}/${userId}`,
        success: (res) => {
          // console.log(res);
        },
        fail: (err) => {
          console.log(err);
        },
      });
    } else {
      this.getDetail(1);
    }
    // 通过延时模拟向后端请求数据，调隐藏骨架屏
    setTimeout(() => {
      this.loading = false;
    }, 2000);
  },
};
</script>

<style lang="scss" scoped>
// 收藏按钮 评价按钮
.food-collect {
  margin-left: 20rpx;
  font-weight: bold;
  color: #4c4c4c;
}
.food-evaluate {
  margin-left: 20rpx;
  font-weight: bold;
  color: #4c4c4c;
}

// 美食介绍
.food-introduction {
  border: 1px solid #ccc;
  border-radius: 20rpx;
  margin: 0 20rpx;
  .food-introduction-title {
    font-size: 20px;
    font-weight: bold;
  }
  .food-introduction-content {
    // ::v-deep .u-content__showmore-wrap {
    //   background-image: none;
    // }
    ::v-deep .u-content__showmore-wrap__readmore-btn {
      position: absolute;
      right: 20rpx;
      margin-top: 20rpx;
    }
    ::v-deep .u-content__showmore-wrap__readmore-btn__icon {
      display: none;
    }
  }
}

// 评分板块
.score-show {
  margin: 20rpx;
  height: 250rpx;
  border-radius: 20rpx;
  border: 1rpx solid #ccc;
  position: relative;
  .sup {
    font-size: 8px;
    position: absolute;
    top: -7rpx;
  }
  .score-content {
    height: 170rpx;
    width: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
    .score-left {
      width: 30%;
      text-align: center;
      .score-num {
        margin-top: 20rpx;
        font-size: 30px;
        font-weight: bold;
      }
    }
    .score-right {
      // border: 1rpx solid #ccc;
      position: absolute;
      top: 12px;
      left: 30%;
      height: 160rpx;
      .score-stars {
        width: 160rpx;
        height: 130rpx;
        // border: 1rpx solid #670b0b;
        // ::v-deep /deep/ 穿透
        ::v-deep .u-rate {
          // 穿透
          // border: 1rpx solid #5792e9;
          font-size: 0px;
          flex-direction: column;
        }
      }
      .score-lines {
        // border: 1rpx solid #16d669;
        // background: lightblue;
        top: 0;
        left: 160rpx;
        width: 100px;
        position: absolute;
        ::v-deep .u-progress {
          display: block;
          margin-top: 15rpx;
        }
      }
    }
  }
}

// 展示所有的评论
.all-comment-cell {
  height: 30rpx;
  margin-bottom: -10rpx;
  margin-top: 30rpx;
}

// 店铺名字
.store-name {
  font-size: 20px;
  font-weight: bold;
  margin: 10rpx 0;
}

// 右标签
.tag-right {
  background-color: #fff0dc;
  color: #9d6613;
  border-radius: 10rpx 0 0 10rpx;
  border: none;
  font-weight: bold;
}

// 左标签
.tag-left {
  background-color: #ffd290;
  color: #a6701d;
  border-radius: 0 10rpx 10rpx 0;
  font-weight: bold;
}

// 美食展示模块
.food-display {
  width: 750rpx;
  height: 700rpx;
  // background-color: lightblue;
  padding: 0 20rpx;
  // position: relative;
  .food-image {
    text-align: center;
    // position: absolute;
    // left: 50%;
    // top: 50%;
    // transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
  }
}

// 评论模板
.comment {
  margin-top: 20rpx;
  margin-right: 20rpx;
  margin-left: 20rpx;
  border-radius: 20rpx;
  border: 1rpx solid #ccc;
  padding: 0 20rpx;
  position: relative;
  .userName {
    position: absolute;
    top: 10rpx;
    left: 130rpx;
  }
  .commentTime {
    position: absolute;
    top: 50rpx;
    left: 130rpx;
    color: #7c7373;
  }
}

// 设置骨架屏 container userinfo userinfo-avatar lists
.container {
  padding: 20rpx 60rpx;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.lists {
  margin: 10px 0;
}
</style>

